<template>
  <div class="indexUser">
    <div class="BtnNav">
      <div class="Serach">
        <div class="userInput">
          <span>
            用户名：
          </span>
          <el-input
            placeholder="请输入用户名"
            v-model="tableForm.userName"
            clearable>
          </el-input>
        </div>
        <div class="userInput">
          <span>
            请选择标签
          </span>
          <el-select v-model="tableForm.labelId" placeholder="请选择标签">
            <el-option
              v-for="item in lableList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-button class="searchBtn" type="primary" @click="searchBtn">查询</el-button>
        <el-button type="success" @click="addUser">新增用户</el-button>
      </div>
    </div>
    <main>
      <el-table
        :data="tableList"
        style="width: 100%;margin: 10px"
        align="center">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column

          prop="userName"
          label="用户名"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="userType"
          label="用户类型"
          width="120"
          align="center">
          <template slot-scope="scope">
            <span>
               {{ scope.row.userType == '01' ? '普通用户' : '系统用户' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="balance"
          label="用户余额"
          width="100"
          align="center">
          <template slot-scope="scope">
            <span :class="scope.row.balance ? 'sucess' : 'eroor'">
               {{ scope.row.balance ? scope.row.balance : '未绑定' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="expirationTime"
          label="到期时间"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.expirationTime ? $moment(scope.row.expirationTime).format("YYYY-MM-DD HH:mm:ss") : '' }}
            </span>
          </template>
        </el-table-column>

<!--        <el-table-column-->
<!--          prop="updateTime"-->
<!--          label="修改时间"-->
<!--          width="200"-->
<!--          align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <span>-->
<!--              {{ scope.row.updateTime ? $moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") : '' }}-->
<!--            </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="updateBy"-->
<!--          label="操作人"-->
<!--          width="120"-->
<!--          align="center">-->
<!--        </el-table-column>-->


        <el-table-column
          prop="labelName"
          label="邀请人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="账号状态"
          width="120"
          align="center">
          <template slot-scope="scope">
            <span :class="scope.row.status == '0' ? 'sucess' : 'eroor'">
               {{ scope.row.status == '0' ? '正常' : '停用' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center">
          <template slot-scope="scope">
            <span>
               {{ scope.row.createTime ? $moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          width="320"
          align="center">
          <template slot-scope="scope">
<!--            <el-button type="success" size="small" @click="Renewal(scope.row)">续期</el-button>-->
            <span class="btnSpan" @click="Renewal(scope.row)"><i class="el-icon-stopwatch"></i>续期</span>
            <span class="btnSpan" @click="updateUser(scope.row)"><i class="el-icon-edit"></i>修改用户</span>
            <span class="btnSpan" @click="refreshBtn(scope.row.userId)"><i class="el-icon-refresh"></i>刷新</span>
            <span class="btnSpan" @click="resetBtn(scope.row)"><i class="el-icon-refresh-left"></i>重置</span>
<!--            <el-button @click="updateUser(scope.row)" type="primary" size="small">修改用户</el-button>-->
<!--            <el-popconfirm-->
<!--              confirm-button-text='好的'-->
<!--              cancel-button-text='不用了'-->
<!--              icon="el-icon-info"-->
<!--              icon-color="red"-->
<!--              title="是否确定删除"-->
<!--              @confirm="deleteUser"-->
<!--              style="margin: 0 5px"-->
<!--            >-->
<!--             -->
<!--            </el-popconfirm>-->
<!--            <el-button slot="reference" type="danger" size="small" @click="refreshBtn(scope.row.userId)">刷新</el-button>-->
<!--            <el-button type="warning" size="small" @click="resetBtn(scope.row)">重置</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :hide-on-single-page="tatolBlur"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableForm.current"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </main>
    <!--  新增dialog-->
    <el-dialog
      :title="dialogTile"
      :visible.sync="centerDialogVisible"
      width="600px"
      center>
      <el-form :model="userForm" :rules="rules" ref="userForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userForm.userName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="userType">
          <el-radio-group v-model="userForm.userType" :disabled="disabled">
            <el-radio label="00">系统用户</el-radio>
            <el-radio label="01">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请选择用户标签" prop="laber">
          <el-select v-model="userForm.labelId" placeholder="请选择" :disabled="disabled">
            <el-option
              v-for="item in lableList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="userForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="apiBindBtn('userForm')">确 定</el-button>
  </span>
    </el-dialog>
    <!--    重置Dialog-->
    <el-dialog
      title="提示"
      :visible.sync="resetPwdDialog"
      width="30%">
      <el-form :model="resetForm" ref="resetForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="新密码"
          prop="password"
          :rules="[
      { required: true, message: '密码不能为空'},
    ]"
        >
          <el-input v-model="resetForm.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="resetPwdDialog = false">取 消</el-button>
    <el-button type="primary" @click="resetSure('resetForm')">确 定</el-button>
  </span>
    </el-dialog>
    <!--    用户续期-->
    <el-dialog
      title="续期"
      :visible.sync="renawaldialogVisible"
      width="30%">
      <template>
        <el-radio v-model="renawalForm.expirationDay" label="30">月卡</el-radio>
        <el-radio v-model="renawalForm.expirationDay" label="90">季卡</el-radio>
        <el-radio v-model="renawalForm.expirationDay" label="365">年卡</el-radio>
      </template>
      <span slot="footer" class="dialog-footer">
    <el-button @click="renawaldialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="renawalSure">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {ajax} from "@/config/strategy";
import JSEncrypt from 'jsencrypt';

export default {
  name: "index",
  data() {
    //手机号格式校验
    var validatorPhone = function (rule, value, callback) {
      if (value) {
        if (!/^1\d{10}$/.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
      callback();
    }
    return {
      value2: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      renawaldialogVisible: false,
      renawalForm: {
        userId: 0,
        expirationDay: '90'
      },
      resetForm: {
        userId: null,
        password: null,
      },
      resetPwdDialog: false,
      disabled: false,
      dialogTile: '新增用户',
      lableList: null,
      tatolBlur: false,
      total: null,
      tableForm: {
        current: 1,
        size: 10,
        beginTime: null,
        endTime: null,
        userName:null,
        labelId:null
      },
      tableList: [
        {
          userId: 4,
          userName: "17671004004",
          userType: "01",
          email: "11",
          phone: "17671004005",
          password: "$2a$10$T1vaQqAaBQuGFGe75gHb/.o9yKTS7PY2j8CV8skakn9IMNRThCdtq",
          status: "0",
          expirationTime: this.$moment("2024-06-01T19:25:09.000+00:00").format("YYYY-MM-DD HH:mm:ss"),
          delFlag: "0",
          labelId: "1",
          loginIp: "",
          loginDate: null,
          createBy: "admin",
          createTime: "2024-06-01T08:25:09.000+00:00",
          updateBy: "admin",
          updateTime: "2024-06-01T03:37:27.000+00:00",
          remark: "测试01",
          params: {},
          expirationDay: null,
          labelName: "抖音-btc鹏先生"
        }
      ],
      centerDialogVisible: false,
      userForm: {
        userName: null,
        password: null,
        userType: '01',
        email: null,
        phone: null,
        labelId: null,
        remark: null
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        userType: [
          {required: true, message: '请选择用户类型', trigger: 'blur'},
        ],
        labelId: [
          {required: true, message: '请选择用户标签', trigger: 'blur'},
        ],
        email: [
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
        phone: [
          {
            validator: validatorPhone,
            trigger: ["blur", "change"]
          }
        ],
      }
    }
  },
  mounted() {
    this.searchPageList()
    this.searchlableList()
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      } else if (rowIndex % 2 !== 1) {
        // return 'success-row';
      }
      return '';
    },
    refreshBtn(id){
      var pms={
        userId:id
      }
      ajax.refreshById(pms).then(res=>{
        const {code, msg} = res.data
        if (code == '00000') {
          this.$message.success(msg)
          this.searchPageList()
        } else {
          this.$message.error(msg)
        }
      })
    },
    //查询按钮
    searchBtn() {
      this.tableForm.current=1
      this.searchPageList()
      if (this.value2){
        this.tableForm.beginTime = this.$moment(this.value2[0]).format("YYYY-MM-DD 00:00:00")
        this.tableForm.endTime = this.$moment(this.value2[1]).format("YYYY-MM-DD 00:00:00")
      }else {
        this.tableForm.beginTime = null
        this.tableForm.endTime = null
      }
      this.searchPageList()
    },
    renawalSure() {
      ajax.addExpiration(this.renawalForm).then(res => {
        const {code, msg} = res.data
        if (code == '00000') {
          this.$message.success(msg)
          this.renawalForm.expirationDay = '90'
          this.renawaldialogVisible = false
        } else {
          this.$message.error(msg)
        }
      })
    },
    //续期按钮
    Renewal(row) {
      this.renawalForm.userId = row.userId
      console.log(this.renawalForm)
      this.renawaldialogVisible = true
    },
    //重置密码
    resetBtn(row) {
      this.resetPwdDialog = true
      this.resetForm.userId = row.userId
      this.resetForm.password = '123456'
    },
    //重置确认
    resetSure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.resetForm.password = this.RSAgetPass(this.resetForm.password)
          ajax.resetPwd(this.resetForm).then(res => {
            const {data} = res
            if (data.code == '00000') {
              this.resetForm = {
                userId: null,
                password: null,
              }
              this.$message.success('修改成功')
              this.resetPwdDialog = false
            } else {
              this.$message.success(data.msg)
            }
          })
        } else {
          console.log('请检查是否输入正确');
          return false;
        }
      });
    },
    //新增用户
    addUser() {
      this.centerDialogVisible = true
      this.disabled = false
      this.dialogTile = '新增用户'
      this.userForm = {
        userName: null,
        password: null,
        userType: '01',
        email: null,
        phone: null,
        labelId: null,
        remark: null
      }
    },
    //删除用户
    deleteUser() {
      console.log('删除')
    },
    //修改用户
    updateUser(row) {
      this.centerDialogVisible = true
      this.dialogTile = '修改用户信息'
      this.disabled = true
      this.userForm = row
      this.userForm.labelId = row.labelId * 1
      console.log(row)
    },
    //列表查询
    searchPageList() {
      var pms
      if (this.tableForm.beginTime == null || this.tableForm.endTime == null) {
        pms = {
          current: this.tableForm.current,
          size: this.tableForm.size,
          labelId: this.tableForm.labelId,
          userName: this.tableForm.userName,
        }
      } else {
        pms = this.tableForm
      }
      ajax.searchPage(pms).then(res => {
        const {data, code} = res
        if (code == '00000') {
          this.tableList = data.records
          this.total = data.total
          if (this.total <= 10) {
            this.tatolBlur = true
          }
        }
      })
    },
    //标签查询
    searchlableList() {
      ajax.lableList().then(res => {
        this.lableList = res.data
      })
    },
    handleSizeChange(val) {
      this.tableForm.size = val
      this.searchPageList()
    },
    handleCurrentChange(val) {
      this.tableForm.current = val
      this.searchPageList()
    },
    apiBindBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogTile == '新增用户') {
            this.userForm.password = this.RSAgetPass(this.userForm.password)
            ajax.addUser(this.userForm).then(res => {
              console.log(res)
              var {data} = res
              if (data.code == '00000') {
                this.userForm = {
                  userName: null,
                  password: null,
                  userType: '01',
                  email: null,
                  phone: null,
                  labelId: null,
                  remark: null
                }
                this.$message.success(data.msg)
                this.centerDialogVisible = false
                this.searchPageList()
              } else {
                this.$message.error(data.msg)
              }
            })
          } else if (this.dialogTile == '修改用户信息') {
            ajax.putUser(this.userForm).then(res => {
              var {code} = res
              if (code == '00000') {
                this.userForm = {
                  userName: null,
                  password: null,
                  userType: '01',
                  labelId: null,
                  email: null,
                  phone: null,
                  remark: null
                }
                this.$message.success(res.msg)
                this.centerDialogVisible = false
                this.searchPageList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          console.log('请检查是否输入正确');
          return false;
        }
      });


      // console.log(this.RSAgetPass(this.userForm.password))
    },
    //加密方法
    RSAgetPass(pas) {
      const rsa = new JSEncrypt();
      rsa.setPublicKey(this.$store.state.user.publicKey);
      console.log('加密：' + rsa.encrypt(pas))
      return rsa.encrypt(pas)
    },
  }
}
</script>

<style scoped lang="scss">
.Serach{
  display: flex;
  .userInput{
    width: 260px;
    margin: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        display: inline-block;
        border: 1px solid #DCDFE6;
        height: 38px;
        line-height: 38px;
        margin-right: -2px;
        padding: 0 4px;
        font-size: 12px;
        text-align: center;
        width: 80px;
      }

  }
  .searchBtn{
    margin-left: 10px;
  }
}
.eroor {
  background-color: #fef0f0;
  padding: 4px 8px;
  font-size: 12px;
  color: #f78585;
  border-radius: 2px;
}

.sucess {
  background-color: #f0f9eb;
  padding: 4px 8px;
  font-size: 12px;
  color: #82cd5d;
  border-radius: 2px;
}

.indexUser {
  background-color: #fff;
  min-height: 100%;
  overflow: hidden;

  .BtnNav {
    margin: 10px 0 0 20px;
  }
}
</style>
